<template>
    <div class="mui-numbox" data-numbox-min='1' :data-numbox-max='max'>
        <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
        <input id="test" class="mui-input-numbox" type="number" value="1" ref="nobox" @change="countChanged"/>
        <!-- 注意：input是@change -->
        <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
	</div>
</template>

<script>
import mui from '../../../lib/mui/js/mui.js'
export default {
    data() {
        return {
            
        }
    },
    activated(){
        this.$refs.nobox.value = 1
    },
    mounted() {
        // 当组件挂载搭配页面中之后，初始化数字框
        //mui(select).numbox()
        mui(".mui-numbox").numbox()
    },
    methods: {
        countChanged(){
            // 绑定输入框的数据
            // 给按钮绑定的弊端：当数量减为1时，检测不到
            const val=this.$refs.nobox.value;
            // 子组件调用父组件传来的方法
            this.$emit('func',parseInt(val));
        }
    },
    props:["max"],//接收父组件传递过来的库存量max
    watch: {
        // 使用场景:监听单个的虚拟的数据
        max:function(newval,oldval){
            // 不论外界传递给nobox的max是啥，最终最后传递的max值，肯定是一个合法的数值；
            // 每当 监听到max值的改变，不论这个值是否合法，都重新为数字框，时间JS API，来手动设置最大值
            mui(".mui-numbox").numbox().setOption('max',newval)
        }
    },
}
</script>

<style lang="scss" scoped>
    
</style>